<template>
	<!-- 首页 -->
	<view>

		<view class="bg">
		<!-- 	<view class="status_bar">
			</view> -->
			<view class="title">
				智慧社区
			</view>
			<!-- <input v-color type="text" value="" /> -->

			<view class="search">
				<view class="address">
					<span class="icons iconfont icon-dizhi"></span>
					<view class="city">
						首尔甜城
					</view>
				</view>
				<view class="int">
					<view class="sosuo iconfont icon-sousuo"></view>
					<input type="text" placeholder="搜索关键字" />
				</view>
			</view>

			<view class="home">
				<view class="home_fee" @click="navigateTo('/pages/livefee/livefee')">
					<view class="blue">
						<span class="iconfont icon-qian"></span>
					</view>
					<view class="fee_btm">生活缴费</view>
				</view>
				<view class="home_fee"  @click="navigateTo('/pages/repairs/repairs')">
					<view class="blue green">
						<span class="iconfont icon-ziyuan"></span>
					</view>
					<view class="fee_btm">物业报修</view>
				</view>
				<view class="home_fee">
					<view class="blue orange">
						<span class="iconfont icon-wentifankui"></span>
					</view>
					<view class="fee_btm">
						问题反馈
					</view>
				</view>
				<view  @click="navigateTo('/pages/myhelp/myhelp')" class="home_fee">
					<view class="blue blues">
						<span class="iconfont icon-xiaoxi1"></span>
					</view>
					<view class="fee_btm">
						我要帮助
					</view>
				</view>
			</view>
		</view>

		<!-- 头条 -->
		<view class="line">
			<view class="line_top">
				<view class="top_left">
					<image src="/static/images/toutiao.jpg" mode=""></image>
					<view class="count">
						
						<swiper :vertical="true" class="newsswiper" circular :autoplay="swiper.autoplay" :interval="swiper.interval"
										:duration="swiper.duration">
										<swiper-item @click="showNotice(item.id)" v-for="item in notices" :key="item.id">
											{{item.title}}
										</swiper-item>

									</swiper>
									
						
					</view>
				</view>
				<view @click="navigateTo('/pages/information/information?type=1')"  class="top_rgt">
					<view class="more">
						更多<i class="iconfont icon-gengduo"></i>
					</view>
				</view>
			</view>
			<view class="line_btm">
				
					<swiper indicator-active-color="#0287fe" class="swiper" circular :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay" :interval="swiper.interval"
								:duration="swiper.duration">
								<swiper-item v-for="item in swiperImgs" :key="item.id">
									
									<image @click="navigate(item.url)" :src="imgUrl+item.picture" mode=""></image>
								</swiper-item>
								
							</swiper>
					 
			</view>
		</view>

		<!-- 生活门店 -->
		<view class="shop">
			<view class="shop_title">
				生活门店
			</view>
			<view class="shop_ul">
				<view class="shop_li">
					<image src="@/static/images/index1.jpg" mode=""></image>
				</view>
				<view class="shop_li">
					<image src="@/static/images/index2.jpg" mode=""></image>
				</view>
			</view>
		</view>

		<!-- 资讯 -->
		<view class="msg">
			<view class="top">
				<view class="msg_left">资讯</view>
				<view @click="navigateTo('/pages/information/information?type=2ss')"  class="iconfont icon-gengduo msg_icon"></view>
			</view>
			<view class="btm">
				<view @click="showDetail(item.id)" class="end" v-for="(item,index) in newData" :key="index">
					<view class="btm_left">
						<view class="btm_title">
							{{item.title}}
						</view>
						<view class="times">{{item.addtime}}</view>
					</view>
					<view class="btm_rgt">
						<image :src="imgUrl+item.picture?imgUrl+item.picture:'../../static/images/chat_l.jpg'" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import router from '../../router/index.js'
	import {
		newList
	} from '../../api/home.js'
	import {
		IMAGE_URL
	} from '../../utils/config.js'
	import {getAdList} from '../../api/advertisement.js'
	export default {
		data() {
			return {
				 swiper:{
					   indicatorDots: true,
					             autoplay: true,
					             interval: 2000,
					             duration: 500
				 },
				query: {
					key: '',
					type: 2,
					page: 1,
					psize: 5
				},
				newData: [],
				notices:[],
				imgUrl: IMAGE_URL,
				swiperImgs:[]
			}
		},
		onLoad() {
			
			this.getNewsList();
			this.getAdvertisementList();
			this.getNotices();
		},
		methods: {
			navigateTo(url){
				
				router.navigateTo(url)
			},
			showNotice(id){
				uni.navigateTo({
					url:`/pages/dynamic/dynamic?id=${id}`
				})
			},
			navigate(url){
				
				if(url){
					uni.navigateTo({
						url
					})
				}
			},
			
			//获取轮播图
		 async	getAdvertisementList(){
			 
			 const res=await getAdList({typeid:1,psize:10});
			 if(res.errCode===10000){
				 this.swiperImgs=res.data.list;
			 }
				
			},
		    //跳转到详情页面
			
			showDetail(id){
				uni.navigateTo({
					url:"/pages/dynamic/dynamic?id="+id
				})
			},
			async getNewsList() {
				let res = await newList(this.query)
				console.log(res);
				this.newData = res.data.list
			},
			async getNotices() {
				let res = await newList({type:1,psize:10})
				console.log(res);
				this.notices = res.data.list
			}
		}
	}
</script>

<style scoped lang="less">
	@import url('@/static/css/home.css');
	.swiper{
		width: 100%;
		height: 248rpx;
		swiper-item{
				height: 248rpx;
				image{
					width: 100%;
						height: 248rpx;
				}
		}
		
	}
	.newsswiper{
		height: 40rpx;
		swiper-item{
			width: 100%;
			height: 40rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
 
</style>